<!DOCTYPE html>
<html>
<head>
	<title>Attaching Event Handlers</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myGrid;
		function doOnLoad(){
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.setHeader("Column A, Column B, Column C, Column D");
			myGrid.setInitWidths("100,200,80,*");
			myGrid.setColAlign("right,left,center,right");
			myGrid.setColTypes("ro,ed,ch,price");
			myGrid.setColSorting("int,str,str,str");
			myGrid.attachEvent("onRowSelect",doOnRowSelected);
			myGrid.attachEvent("onEditCell",doOnCellEdit);
			myGrid.attachEvent("onEnter",doOnEnter);
			myGrid.attachEvent("onCheckbox",doOnCheck);
			myGrid.attachEvent("onBeforeRowDeleted",doBeforeRowDeleted);
			myGrid.init();
			myGrid.load("../common/grid.xml");
		}
		function protocolIt(str){
			var p = document.getElementById("protocol");
			p.innerHTML = "<li style='height:auto;'>"+str+"</li>" + p.innerHTML
		}
		function doOnRowSelected(id){
			protocolIt("Rows with id: "+id+" was selected by user")
		}
		function doOnCellEdit(stage,rowId,cellInd){
			if(stage==0){
				protocolIt("User starting cell editing: row id is"+rowId+", cell index is "+cellInd)
			}else if(stage==1){
				protocolIt("Cell editor opened");
			}else if(stage==2){
				protocolIt("Cell editor closed");
			}
			return true;
		}
		function doOnCheck(rowId,cellInd,state){
			protocolIt("User clicked on checkbox or radiobutton on row "+rowId+" and cell with index "+cellInd+".State changed to "+state);
			return true;
		}
		function doOnEnter(rowId,cellInd){
			protocolIt("User pressed Enter on row with id "+rowId+" and cell index "+cellInd);
		}
		function doBeforeRowDeleted(rowId){
			if(confirm("Are you sure you want to delete row")){
				protocolIt("Row deletion confirmed");
				return true;
			}else{
				protocolIt("Row deletion canceled");
				return false;
			}
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Attaching Event Handlers</h1>
	<p>Control grid processing and user behavior using Grid Event Handlers available through JavaScript Methods.</p>
	<table width="500px">
		<tr>
			<td>
				<div id="gridbox" style="width:100%;height:250px;background-color:white;"></div>
				<a href="javascript:void(0)" onClick="myGrid.deleteSelectedItem()">Remove Selected Row</a>
			</td>
		</tr>
		<tr>
			<td>
				Protocol:<br>
				<div id="protocol" style="width:500px;height:200px;overflow:auto;border:1px solid green;"></div>
			</td>
		</tr>
	</table>
</body>
</html>
